<template>
    <div class="p40 ui-body-min-height">
        <ui-title>白菜框</ui-title>
        <el-tabs v-model="tab" @tab-click="">
            <el-tab-pane v-for="group in dataGroup" :key="group.name" :label="group.name" :name="group.name" v-loading="group.loading">

                <div>
                    <ui-empty :data="group.data"></ui-empty>
                    <coupon v-for="(item,i) in group.data" :key="group.name+i" :color="group.color" :data="item" @click.native="linkCouponDeatils(item.id)" class="mr10" style="width:320px"></coupon>
                </div>

                <!-- 分页 -->
                <div class="text-center mt20">
                    <el-pagination
                        @current-change="fetchData(group)"
                        :current-page.sync="group.params.page_no"
                        :page-size="group.params.page_size"
                        layout="prev, pager, next, jumper"
                        :total="group.total">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import coupon from '@/views/coupon'
    export default {
        components:{
            coupon
        },
        data(){
            let pageSize=3*6
            return {
                tab:'',
                dataGroup:[
                    {//可领取
                        name:'可领取',
                        data:[],
                        total:0,
                        color:'rgb(10,192,97)',
                        loading:false,
                        getUrl:'index.php?g=home&m=GameCoupon&a=coupon_list',
                        params:{
                            page_no:1,
                            page_size: pageSize,
                            is_push:1,
                        },
                    },
                    {//已领取
                        name:'已领取',
                        data:[],
                        total:0,
                        color:'orange',
                        loading:false,
                        getUrl:'index.php?g=home&m=GameCoupon&a=user_draws',
                        params:{
                            page_no:1,
                            page_size: pageSize,
                            type:1,
                        },
                    },
                    {//过期
                        name:'已过期',
                        data:[],
                        total:0,
                        color:'#999',
                        loading:false,
                        getUrl:'index.php?g=home&m=GameCoupon&a=user_draws',
                        params:{
                            page_no:1,
                            page_size: pageSize,
                            type:2,
                        },
                    },
                ],
            }
        },
        methods:{
            fetchData(group){
                if (group.loading) {
                    return
                }
                group.loading = true
                this.$http.get(group.getUrl, {
                    params:group.params
                })
                .then(({data})=>{
                    console.log(group.name,data);
                    if (data.code===1 && data.data.length>0) {
                        // this.$set(group,'data',data.data)
                        group.data = data.data
                        group.total = parseInt(data.total)
                    }
                    group.loading=false
                }).catch(() => {
                    group.loading = false
                })
            }
        },
        mounted(){
            this.tab = this.dataGroup[0].name
            this.dataGroup.forEach((group)=>{
                this.fetchData(group)
            })
        },
    }
</script>